<template>
    <div>
        <el-dialog :title="dialog.title" :visible.sync="dialog.visible" v-bind="$attrs" v-on="$listeners"
            @close="onClose">
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                <el-form-item label="父级栏位" prop="parentId">
                    <el-select v-model="formData.parentId" placeholder="请选择父级栏位" clearable :style="{width: '100%'}">
                        <el-option v-for="(item, index) in parentOptions" :key="index" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="栏位名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入栏位名称" :maxlength="30" show-word-limit clearable
                        :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="isSystem" required>
                    <el-switch v-model="formData.isSystem" active-text="是否为系统内置集成，如果为是，则不允许删除" active-color="#EB5B02">
                    </el-switch>
                </el-form-item>
                <el-form-item label="栏位排序" prop="sort" required>
                    <el-slider :max='100' :step='1' v-model="formData.sort"></el-slider>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="handelConfirm">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import _ from 'lodash'
    export default {
        inheritAttrs: false,
        components: {},
        props: [],
        data() {
            return {
                dialog: {
                    title: '添加字典栏位',
                    visible: false
                },
                formData: {
                    id: undefined,
                    parentId: undefined,
                    name: undefined,
                    isSystem: false,
                    sort: 1,
                },
                rules: {
                    parentId: [{
                        required: true,
                        message: '请选择父级栏位',
                        trigger: 'change'
                    }],
                    name: [{
                        required: true,
                        message: '请输入栏位名称',
                        trigger: 'blur'
                    }],
                },
                parentOptions: [{
                    "label": "一级栏位",
                    "value": '0'
                }],
            }
        },
        computed: {},
        watch: {},
        created() { },
        mounted() { },
        methods: {
            onClose() {
                this.$refs['elForm'].resetFields()
            },
            close() {
                this.dialog.visible = false
                this.parentOptions = [{
                    "label": "一级栏位",
                    "value": '0'
                }]
                this.$emit('update:visible', false)
            },
            handleAdd(list) {
                let _this = this;
                list.forEach(function (item, i) {
                    if (item.parentId == '0') {
                        _this.parentOptions.push({
                            "label": item.name,
                            "value": item.id
                        });
                    }
                })
                this.formData.id = undefined;
                this.dialog.title = '添加字典栏位'
                this.dialog.visible = true
            },
            handelModify(record, list) {
                let _this = this;
                list.forEach(function (item, i) {
                    if (item.parentId == '0') {
                        _this.parentOptions.push({
                            "label": item.name,
                            "value": item.id
                        });
                    }
                })
                this.dialog.title = '编辑字典栏位'
                this.dialog.visible = true
                this.$nextTick(() => {
                    this.formData = _.cloneDeep(record)
                })
            },
            handelConfirm() {
                this.$refs['elForm'].validate(valid => {
                    if (!valid) return
                    if (!this.formData.id) {
                        this.$api.sys.codetype
                            .submit(this.formData)
                            .then(({ statusCode, data, message }) => {
                                if (statusCode == 200) {
                                    this.close()
                                    this.$emit('complete')
                                    this.$notify({
                                        message: '添加成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$notify({
                                        message: message,
                                        type: 'error'
                                    })
                                }
                            })
                            .catch(() => {
                                this.loading = false
                            })
                    } else {
                        console.log(this.formData);
                        this.$api.sys.codetype
                            .modify(this.formData)
                            .then(({ statusCode, data, message }) => {
                                if (statusCode == 200) {
                                    this.close()
                                    this.$emit('complete')
                                    this.$notify({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$notify({
                                        message: message,
                                        type: 'error'
                                    })
                                }
                            })
                            .catch(() => {
                                this.loading = false
                            })
                    }
                })
            }
        }
    }
</script>
<style>
</style>